<template>
    <!-- 链接按钮 -->
    <button 
        :class="['common',width]"
        @click="handleClick"
    >
    <!-- 按钮文本 -->
        <i>{{ props.text }}</i>
    </button>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';

interface Props{
    text:string,
    path:string,
    width:string
}
// 从属性接收按钮文本、跳转路径、按钮宽度
const props=defineProps<Props>();
// 使用路由
const router=useRouter();
// 点击事件回调函数
function handleClick():void{
    // 根据属性接收的路径进行路由跳转
    router.push({
        path:props.path
    });
}
</script>

<style lang="scss" scoped>
/* 按钮公用样式 */
.common{
    margin:0;
    padding:0;
    height:100%;
    font-size:3.5vw;
    border:0;
    background-color: transparent;
    color:white;
    font-weight: bold;
    &:hover{
        cursor:pointer;
        color:blue;
    }
}
/* 四字符按钮宽度 */
.width_4{
    width:14vw;
    margin-right:2vw;
}
/* 六字符按钮宽度 */
.width_6{
    width:21vw;
}
/* 八字符按钮宽度 */
.width_8{
    width:28vw;
}
</style>
